<template>
  <div class="ratings" ref="ratingscroll">
    <div class="ratings-content">
      <div class="overview">
        <div class="overview-left">
          <h1 class="score">{{seller.score}}</h1>
          <div class="title">综合评分</div>
          <div class="rank">高于周边商家{{seller.rankRate}}%</div>
        </div>
        <div class="overview-right">
          <div class="score-wrapper">
            <span class="title">服务态度</span>
            <star :size="36" :score="seller.serviceScore"></star>
            <span class="score">{{seller.serviceScore}}</span>
          </div>
          <div class="score-wrapper">
            <div class="title">商品评分</div>
            <star :size="36" :score="seller.foodScore"></star>
            <span class="score">{{seller.foodScore}}</span>
          </div>
          <div class="delivery-wrapper">
            <span class="title">送达时间</span>
            <span class="delivery">{{seller.deliveryTime}}分钟</span>
          </div>
        </div>
      </div>
      <split></split>
      <ratingselect :ratings="ratings" :selectType="selectType" :onlyContent="onlyContent" :desc="desc" @ratingtype-select="ratingselect" @ratingtype-toggle="ratingtoggle"></ratingselect>
      <div class="rating-wrapper">
        <ul v-show="ratings">
          <li class="rating-item border-1px" v-show="needShow(rating.rateType,rating.text)" v-for="rating in ratings" :key="rating.rateTime">
            <div class="avatar">
              <img :src="rating.avatar">
            </div>
            <div class="time">{{rating.rateTime | formatDate}}</div>
            <div class="content">
              <div class="name">{{rating.username}}</div>
              <div class="score-wrapper">
                <star class="star" :size="36" :score="rating.score"></star>
                <span class="delivery" v-show="rating.deliveryTime && rating.deliveryTime !== ''">{{rating.deliveryTime}}分钟送达</span>
              </div>
              <p class="text">{{rating.text}}</p>
              <div class="rateType">
                <span :class="{'icon-thumb_up':rating.rateType === 0,'icon-thumb_down':rating.rateType === 1}" class="icon"></span>
                <span class="recommend border-all-1px" v-show="rating.recommend !== ''" v-for="commodity in rating.recommend" :key="commodity.id">{{commodity}}</span>
              </div>
            </div>
          </li>
        </ul>
        <div class="no-rating" v-show="!ratings">暂无评价</div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import star from '../star/star'
import split from '../split/split'
import ratingselect from '../ratingselect/ratingselect'
import { formatDate } from '../../common/js/date.js'

const ERR_OK = 0
const ALL = 2

export default {
  props: {
    seller: {
      type: Object
    }
  },
  data() {
    return {
      ratings: [],
      selectType: ALL,
      onlyContent: false,
      desc: {
          all: '全部',
          positive: '满意',
          negative: '不满意'
      }
    }
  },
  created() {
    this.$http.get('api/ratings').then((response) => {
      response = response.body
      if (response.errno === ERR_OK) {
        this.ratings = response.data
        this.$nextTick(() => {
          this._initScroll()
        })
      }
    })
  },
  methods: {
    _initScroll() {
      this.ratingscroll = new BScroll(this.$refs.ratingscroll, {
        click: true
      })
    },
    needShow(type, text) {
        // 判断是否显示内容
        if (this.onlyContent && !text) {
            return false
        }
        if (this.selectType === ALL) {
            return true
        } else {
            // 对比type，相同的那个li才能显示
            return type === this.selectType
        }
    },
    ratingselect(type) {
        this.selectType = type
        // 异步更新一下DOM
        this.$nextTick(() => {
            this.ratingscroll.refresh()
        })
    },
    ratingtoggle(onlyContent) {
        this.onlyContent = onlyContent
        this.$nextTick(() => {
            this.ratingscroll.refresh()
        })
    }
  },
  filters: {
      formatDate(time) {
          let date = new Date(time)
          return formatDate(date, 'yyyy-MM-dd hh:mm')
      }
  },
  components: {
    star,
    split,
    ratingselect
  }
}

</script>

<style lang='stylus' scoped>
@import '~common/stylus/variable.styl'
@import '~common/stylus/mixin.styl'

.ratings
  position: absolute
  top: 174px
  bottom: 0
  left: 0
  width: 100%
  overflow: hidden
  .overview
    display: flex
    padding: 18px 0
    .overview-left
      flex: 0 0 137px
      padding: 6px 0
      width: 137px
      text-align: center
      border-right-1px($color-row-line)
      @media only screen and (max-width: 320px)
        flex: 0 0 120px
        width: 120px
      .score
        margin-bottom: 6px
        line-height: 28px
        font-size: 24px
        color: rgb(255, 153, 0)
      .title
        margin-bottom: 8px
        line-height: 12px
        font-size: 12px
        color: $color-background
      .rank
        line-height: 10px
        font-size: 10px
        color: $color-gray2
    .overview-right
      flex: 1
      padding: 6px 0 6px 24px
      @media only screen and (max-width: 320px)
        padding-left: 6px
      .score-wrapper
        margin-bottom: 8px
        font-size: 0
        .title
          display: inline-block
          line-height: 18px
          vertical-align: top
          font-size: 12px
          color: $color-background
        .star
          display: inline-block
          margin: 0 12px
          vertical-align: top
        .score
          display: inline-block
          line-height: 18px
          vertical-align: top
          font-size: 12px
          color: rgb(255, 153, 0)
      .delivery-wrapper
        font-size: 0
        .title
          line-height: 18px
          font-size: 12px
          color: $color-background
        .delivery
          margin-left: 12px
          line-height: 18px
          font-size: 12px
          color: $color-gray2
  .rating-wrapper
    padding: 0 18px
    .rating-item
      position: relative
      padding: 18px 0
      border-1px($color-row-line)
      .avatar
        position: absolute
        top: 18px
        left: 0
        width: 28px
        height: 28px
        overflow: hidden
        border-radius: 50%
        img
          width: 28px
          height: 28px
      .time
        position: absolute
        top: 18px
        right: 0
        line-height: 12px
        font-size: 10px
        font-weight: 200
        color: $color-gray2
      .content
        padding-left: 40px
        .name
          margin-bottom: 4px
          line-height: 12px
          font-size: 10px
          color: $color-background
        .score-wrapper
          margin-bottom: 6px
          font-size: 0
          .star
            display: inline-block
            vertical-align: top
          .delivery
            display: inline-block
            margin-left: 6px
            line-height: 15px
            font-size: 10px
            font-weight: 200
            color: $color-gray2
        .text
          line-height: 18px
          font-size: 12px
          color: $color-background
        .rateType
          margin-top: 8px
          line-height: 16px
          .icon
            display: inline-block
            line-height: 18px
            font-size: 12px
            &.icon-thumb_up
                color: $color-blue
            &.icon-thumb_down
                color: $color-gray2
          .recommend
            display: inline-block
            margin-left: 8px
            margin-bottom: 3px
            padding: 0 6px
            line-height: 18px
            font-size: 9px
            color: $color-gray2
            background-color: #fff
            border-radius: 1px
            border-all-1px($color-row-line)
    .no-rating
      padding: 16px 0
      font-size: 12px
      color: $color-gray2
</style>
